<template>
	<div class="car">
		<div class="top">
		<img class="zuo" src="../../../static/img1/back.png"/><span>购物车</span><img class="sheng" src="../../assets/img1/menu.png" />
	    </div>
	    <div id="carmid">
	    	<img src="../../assets/img1/buycar.png"/>
	    	<span class="nothing">您还没有购买任何商品</span>
	    	<div id="choose">
	    		<div id="seesee">
	    			逛一逛
	    		</div>
	    		<div id="mycol">
	    			我的收藏
	    		</div>
	    	</div>
	    </div>
	    <div class="gray1">猜你喜欢</div>
	     <div class="manybooks">
	     	<div class="singlebook" v-for="d in car">
	     		<img class="slbimg" :src="d.img" alt="暂无此图"/>
	     		<span id="slbspan">{{d.title}}</span>
	     		<div>￥19.9</div>
	     	</div>
	     </div>
		</div>
</template>

<script>
	
	
	export default {
		data(){
			return {
				car:[]
			}
		},
		methods:{
			request(){
				this.$http({
					url: 'http://localhost:8080/reqcar',
					params: {
						
					},
					method: 'GET'
				}).then(function(req){
					// console.log(req);
					//var result = JSON.parse(req.body);
					//this.dataList = result.data;
					console.log(req)
					this.car = req.body.result.data;
				});
			}
		},
		mounted(){
			this.request();
		},
	}
</script>

<style>
	header{
		display:none;
		
	}
	section{
		margin-top:-1.2rem;
	}
	.car{
		width: 10rem;
		
	}
	.top{
		width: 10rem;
		height: 0.78125rem;
		display: flex;
		justify-content: space-around;
		border-bottom: solid 0.015625rem lightgray;
	}
	.car span{
		display: inline-block;
		width: 8rem;
		text-align: center;
		font-size: 0.421875rem;
		vertical-align: middle;
	}
	.sheng{
		width: 0.71875rem;
		height: 0.234375rem;
		vertical-align: middle;
		margin-top: 0.15rem;
	}
	.zuo{
		width:0.234375rem;
		height: 0.421875rem;
		vertical-align: middle;
	}
	#carmid{
		width: 10rem;
		height: 6rem;
		text-align: center;
		background-color: #f2f2f2;
	}
	#carmid img{
		margin-top:1.25rem;
	}
	.nothing{
		display: inline-block;
		width: 10rem;
		height: 1rem;
		background-color: #f2f2f2;
		text-align: center;
		margin-top: 0.15625rem;
		color: lightslategray;
	}
	#choose{
		display: flex;
	}
	#seesee{
		width: 3rem;
		height: 1rem;
		border: solid 0.015625rem darkslategray;
		text-align:center;
		font-size: 0.4375rem;
		line-height: 1rem;
		border-radius: 0.15625rem;
		color:lightslategray;
		margin-left: 1.5rem;
		margin-right: 0.5rem;
	}
	#mycol{
		width: 3rem;
		height: 1rem;
		border: solid 0.015625rem darkslategray;
		text-align:center;
		font-size: 0.4375rem;
		line-height: 1rem;
		border-radius: 0.15625rem;
		color:lightslategray ;
	}
		.gray1{
			width: 10rem;
			height: 0.625rem;
			background-color: #f5f1f3;
			background-image: url(../../assets/img1/yes.png);
			background-repeat: no-repeat;
			background-position: 3rem 0;
			text-align: center;
			font-size: 0.40625rem;
		}
		
	.singlebook{
		width: 5rem;
		height: 8rem;
	}
	.slbimg{
		width: 5rem;
		height: 6rem;
	}
	#slbspan{
		width: 5rem;
		text-align: center;
		font-size: 0.46875rem;
		font-weight: bold;
	}
	.manybooks{
		width: 10rem;
		display: flex;
		flex-wrap: wrap;
		height: auto;
	}
	.singlebook div{
		font-size: 0.4375rem;
		color: red;
		font-weight: bold;
	}
</style>